<div id="search-component">

  <h4>英雄搜索</h4>

  <input #searchBox id = "search-box" (keyup)="searchEvent(searchBox.value)"/>

  <ul class="search-result">
    <!--$ 是一个命名惯例，用来表明 heroes$ 是一个 Observable，而不是数组。-->
    <!--*ngFor 不能直接使用 Observable。 不过，它后面还有一个管道字符（|），后面紧跟着一个 async，它表示 Angular 的 AsyncPipe。-->
    <li *ngFor="let hero of heros$ | async">
      <a routerLink="/herodetail/{{hero.id}}"></a>
      {{hero.name}}
    </li>
  </ul>

</div>
